<template>
</template>

<script setup>
import { getWuhanBridge } from "@/api";
import {  onMounted, inject, onBeforeUnmount } from "vue";
import {  LineLayer,Popup} from "@antv/l7";
const { map, scene } = inject("mapScene");
let bridgeLayer
let popup = new Popup()
scene.addPopup(popup)

onMounted(async () => {
    map.flyTo({
        center: [114.277989, 30.554784],
        zoom: 10,
        pitch: 67,
        rotate: -21
    });
    const { data: birdgeData } = await getWuhanBridge();
    //添加桥梁数据和图层
    bridgeLayer = new LineLayer({
        name:"桥梁",
    })
    //color可以直接设置4个值,就可以一一对应,也可以也一个函数使用name判断
    bridgeLayer.source(birdgeData)
        .shape('arc3d')
        .size(10)
        .color('name',["yellow","red","blue","green"])
        .style({
            thetaOffset:1, //3d弧度
        })
    scene.addLayer(bridgeLayer);
    bridgeLayer.on("click",(e)=>{
        //深度结构
        const { feature: {properties:{name,info}},lngLat} =e;
        popup.setLngLat(lngLat);
        popup.setHTML(`<div style="font-size:12px;color=red">${info}</div>`)
        popup.setTitle(name);
    })
});
onBeforeUnmount(()=>{
    scene.removeLayer(bridgeLayer)
    scene.removePopup(popup)
})
</script>

<style lang="scss" scoped>
.btns {
    position: fixed;
    left: 1840px;
    top: 200px;
}
</style>